<template>
    <div class="app-container">
        <div class="warp_padding">  
            <el-page-header @back="goBack" :content="title"></el-page-header>
            <el-row  class="btn_box">
                <el-button size='mini' type="success" @click="memberTree">添加群成员</el-button>
                <el-button size='mini' type="warning" @click="getowner">群主转让</el-button>
            </el-row>
            <membertree ref="membertree" :is-add="isAdd"/>
            <orlist ref="orlist" :is-add="isAdd" :owner="owner"/>

            <el-table :data="lists" border highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;" max-height="650">
                <el-table-column type="selection" width="40"></el-table-column>
                
                <el-table-column type="index" width="45"></el-table-column>
                
                <el-table-column prop="areaName" label="所属区县"  :show-overflow-tooltip="true"></el-table-column>

                <el-table-column prop="schName" label="学校全称"  :show-overflow-tooltip="true"></el-table-column>

                <el-table-column prop="schLevel" label="学校类型" width="85" :formatter="schLevel">
                </el-table-column>

                <el-table-column prop="phName" label="所属学段" width="85">
                </el-table-column>

                <el-table-column prop="createtime" label="入群日期" sortable>
                    <template slot-scope="scope">
                      <span>{{scope.row.createtime | formatDate}}</span>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <el-col :span="24" class="toolbar">
            <el-button type="danger" size="mini" @click="batchRemove" v-if="checkPermission(['group_all','group_del'])" :disabled="this.sels.length===0" class="remove">删除群成员</el-button>

            <el-pagination background  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page.sync="formDate.pageNo" :page-count="pageCount" :page-sizes="[10, 20, 30, 50,100]"  layout="total, sizes,prev, pager, next, jumper" :pager-count="pagerCount" :total="total" class="pagination"></el-pagination>
        </el-col>
    </div>
</template>

<script>
import { formatDate } from '@/utils/formatDate.js'
import checkPermission from '@/utils/permission' 
import { parseTime } from '@/utils/index'
import { groupSave, groupMemberList,memberDel } from '@/api/request'
import { getMemberTree, getownerList } from '@/api/data'
import membertree from './membertree'
import orlist from './orlist'
export default {
    components: { membertree, orlist },
    filters: {
        formatDate(time) {
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }, 
    },
    data() {
        return {
            title:'',
            isAdd:true,
            pageCount: 0,
            total:0,  
            listLoading: false,
            lists: [],
            sels: [],//列表选中列
            pagerCount:11,   
            formDate:{
                pageNo: 1,  
                pageSize:10,
                groupId:'',
            },
            owner:[],
        }
    },
    mounted:function(){
        this.formDate.groupId = this.$route.query.id
        this.title = this.$route.query.groupName
        this.init()
    },
    methods: {
        parseTime,
        checkPermission,
        schLevel(row, column) {
            return row.schLevel == 0 ? '普通学校' : row.schLevel == 1 ? '中心学校' : row.schLevel == 2 ? '教学点': '未知';
        },
        goBack() {
            this.$router.go(-1)
        },
        selsChange: function (sels) {
                this.sels = sels;
        },
        handleCurrentChange(val) {
            this.formDate.pageNo = val;
            this.init()
        },
        handleSizeChange(val) {
            this.formDate.pageSize = val
            this.init()
            // console.log(`page ${val}`);
        },
        toQuery(){
            this.init()
        },
        init(){
            groupMemberList(this.formDate).then(res => { 
                let { list, total } = res
                this.lists = list
                this.total = total
                this.listLoading = false 
            })
        },
        getowner(){
            this.$refs.orlist.dialog = true
            this.isAdd = false
            this.$refs.orlist.form.groupId = this.$route.query.id
            this.ready()
        },
        memberTree(){
            this.$refs.membertree.dialog = true
            this.isAdd = false
            getMemberTree(this.formDate.groupId).then(res => {
                if (res.code == 2000) {
                    let array = res.data.treeData
                    this.$refs.membertree.data2 = array
                    this.$refs.membertree.groupId = this.formDate.groupId
                    this.$refs.membertree.checkList = res.data.checkedIds
                    this.$refs.membertree.setCheckedKeys() 
                }               
            })
        },
        batchRemove(){
            let ids = this.sels.map(item => item.id);
            console.log(this.lists.length)
            this.$confirm('确认删除选中的群成员吗?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.listLoading = true;
                        memberDel(ids).then(res => {
                            this.listLoading = false;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            if ( this.lists.length === this.sels.length  && this.formDate.pageNo != 1)
                            this.formDate.pageNo--
                            this.init();
                        })

                    }).catch(() => {
            });
        },
        handleDel(index,ID){
            let ids = [];
            ids.unshift(ID)
            this.$confirm('确认删除该记录吗?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        // console.log(ids)
                        this.listLoading = true;
                        memberDel(ids).then(res => {
                            this.listLoading = false;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.init();
                        })

                    }).catch(() => {
            });
        },
        async ready(){
            try {
                let data = await getownerList(this.formDate.groupId)
                if (data.code == 2000) {
                   this.owner = data.data
                }
            } catch (e) {
                console.log(e)
            }
        },
    }

}
</script>


<style scoped lang="scss">
.btn_box{
   margin:15px 0;
}
</style>
